{% load threadedcommentstags %}
{% load fieldsets %}

<div id="product-comments">
    <h3>Comments</h3>
    {% if product.comment_count > 0 %}
        {% get_threaded_comment_tree for product as tree %}
        {% for comment in tree %}
            <a name="{{ comment.id }}"></a>
            <div style="margin-left: {{ comment.depth }}em;" class="{% if comment.depth == 0 %}comment{% else %}reply{% endif %}">
                <span class="username">{{ comment.user.username }}</span> {% if comment.depth == 0 %}commented: {% else %}replied: {% endif %}
                {% if user.is_authenticated %}
                    <span id="reply_to_{{ comment.id }}" class="reply_to"><a href="javascript:reply_to('{% get_comment_url product comment %}', '{{ comment.id }}', '{{ comment.user.username }}' , '{% get_comment_url product %}')">Reply</a></span>
                {% endif %}

                <div class="comment">
                {% auto_transform_markup comment %}
                </div>
            </div>
        {% endfor %}
    {% else %}
        <p>No comments!</p>
    {% endif %}

    <h3 id="post_comment">Post a Comment:</h3>
    {% if user.is_authenticated %}
        <form method="post" action="{% get_comment_url product %}" id="post_comment_form">
            {% csrf_token %}
            <ul>
                {% get_threaded_comment_form as form %}
                {% get_fieldset comment as comment from form %}
                {{ comment.as_ul }}
                <li><input type="submit" value="Submit Comment" /></li>
            </ul>
        </form>
    {% else %}
        <p>Login to post comment.</p>
    {% endif %}
</div>
